<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


<div class="container">
    <div class="logo cleaxfix">
        <img src="img/1_03.png" alt="">
    </div>
    <div class="ip">
        <p>天气</p>
        <input type="text" id="ipt" placeholder="输入城市、乡镇、街道、景点名称 查天气">
    </div>
</div>
<div class="main">
    <div class="navbar">
        <p>全国 > <span id="city"></span></p>
    </div>
    <div class="kan">
        <ul>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
            <li>
                <h1 class="ri">日(今天)</h1>
                <p class="wea"></p>
                <p class="tem">
                    <span class="max"></span>
                    /
                    <span class="min"></span>
                </p>
                <span class="feng"></span>
            </li>
        </ul>
    </div>
    <div class="ken">
        <span>分时段预报</span>
    </div>
    <div class="kn">
        <ul>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li>
            <li>
                <span class="house"></span>
                <p class="jj"></p>
                <p class="tt"></p>
            </li><li>
            <span class="house"></span>
            <p class="jj"></p>
            <p class="tt"></p>
        </li>


        </ul>
    </div>
    <div class="jan">
        <span>生活指数</span>
    </div>
    <div class="ww">
        <ul>
            <li class="q1">
                <i class="i1"></i>
                <span></span>
                <em>紫外线指数</em>
                <p class="p1"></p>
            </li>
            <li class="q1">
                <i class="i2"></i>
                <span class="span1"></span>
                <em>减肥指数</em>
                <p class="p2"></p>
            </li>
            <li class="q1">
                <i class="i3"></i>
                <span class="span2"></span>
                <em>健臻·血糖指数</em>
                <p class="p3"></p>
            </li>
            <li class="q1">
                <i class="i4"></i>
                <span class="span3"></span>
                <em>穿衣指数</em>
                <p class="p4"></p>
            </li>
            <li class="q1">
                <i class="i5"></i>
                <span class="span4"></span>
                <em>洗车指数</em>
                <p class="p5"></p>
            </li>
            <li class="q1">
                <i class="i6"></i>
                <span class="span5"></span>
                <em>空气污染扩散指数</em>
                <p class="p6"></p>
            </li>
        </ul>
    </div>
</div>

<script>
    var city = "沧州";
    function c(){
        var p;
        p = new XMLHttpRequest();
        p.onreadystatechange = function(){
            if (p.readyState == 4 && p.status == 200){
                var json = JSON.parse(p.responseText);
                console.log(json);
                for (var i = 0; i < json.daily_forecast.length; i++){
                    var ri = document.querySelectorAll(".ri");
                    ri[i].innerHTML = json.daily_forecast[i].date;
                    var wea = document.querySelectorAll(".wea");
                    wea[i].innerHTML = json.daily_forecast[i].cond.txt_d;
                    var feng = document.querySelectorAll(".feng");
                    feng[i].innerHTML = json.daily_forecast[i].wind.dir;
                    var max = document.querySelectorAll(".max");
                    max[i].innerHTML = json.daily_forecast[i].tmp.max + "℃";
                    var min = document.querySelectorAll(".min");
                    min[i].innerHTML = json.daily_forecast[i].tmp.min + "℃";
                }
                for (var j = 0; j < json.hourly_forecast.length; j++ ){
                    var house = document.querySelectorAll(".house");
                    house[j].innerHTML = json.hourly_forecast[j].date.slice(11,16);
                    var jj = document.querySelectorAll(".jj");
                    jj[j].innerHTML = json.hourly_forecast[j].tmp + "℃";
                    var tt = document.querySelectorAll(".tt");
                    tt[j].innerHTML = json.hourly_forecast[j].wind.dir;

                }
                for (var k = 0; k < 5; k++){
                    var jt = document.querySelector(".q1 span");
                    jt.innerHTML = json.suggestion.uv.brf;
                    var p1 = document.querySelector(".q1 .p1");
                    p1.innerHTML = json.suggestion.uv.txt;

                    var span1 = document.querySelector(".span1");
                    span1.innerHTML = json.suggestion.sport.brf;
                    var p2 = document.querySelector(".q1 .p2");
                    p2.innerHTML = json.suggestion.sport.txt;

                    var span2 = document.querySelector(".span2");
                    span2.innerHTML = json.suggestion.trav.brf;
                    var p3 = document.querySelector(".q1 .p3");
                    p3.innerHTML = json.suggestion.trav.txt;

                    var span3 = document.querySelector(".span3");
                    span3.innerHTML = json.suggestion.drsg.brf;
                    var p4 = document.querySelector(".q1 .p4");
                    p4.innerHTML = json.suggestion.drsg.txt;

                    var span4 = document.querySelector(".span4");
                    span4.innerHTML = json.suggestion.cw.brf;
                    var p5 = document.querySelector(".q1 .p5");
                    p5.innerHTML = json.suggestion.cw.txt;

                    var span5 = document.querySelector(".span5");
                    span5.innerHTML = json.suggestion.air.brf;
                    var p6 = document.querySelector(".q1 .p6");
                    p6.innerHTML = json.suggestion.air.txt;
                }

                document.querySelector("#city").innerHTML = json.basic.city;
            }
        };
        p.open("GET","https://bird.ioliu.cn/weather?city=" + city,true);
        p.send();
    }
    c();

    document.querySelector("#ipt").addEventListener('change',function(){
        city = this.value;
        c();
    })


</script>
</body>
</html>